<template>
  <div>
    <!-- 导航1 -->
    <el-header class="header">
      <el-row>
        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" class="header_navbar">
          <el-col :span="8">
            <!-- 导航条logo -->
            <el-menu-item index="1" class="logo_box">
              <img src="../../assets/librarian/image/lib_logo.png" class="logo" />
            </el-menu-item>
          </el-col>
          
          <!-- 导航条返回上一个页面按钮 -->
          <el-col :span="2" class="logout">
            <el-menu-item index="3" class="logout_box">
              <el-button type="info" @click="backToAdminHome">Back</el-button>
            </el-menu-item>
          </el-col>
          <!-- 退出超管登录 -->
          <el-col :span="2" class="logout_login">
            <el-menu-item index="3" class="logout_box">
              <el-button type="info" @click="backToLogin" >Logout</el-button>
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-row>
    </el-header>
    <div>
      <!-- <img src="../../assets/admin/image/password.png" alt="" height="100%"> -->
        <div class="recover_box">

            <!-- 主体区域 -->
            <el-form ref="recoverRef"  class="rec_form" :model="form" label-width="140px">
              <!-- 输入图书馆管理员账号 -->
                <el-form-item  label="Librarian Account" prop="username" >
                  <el-input v-model="form.username"  prefix-icon="iconfont icon-user" placeholder="please input librarian account"></el-input>
                </el-form-item>
                <!-- 密码找回显示区域 -->
                <el-form-item label="Password Recover">
                  <el-input v-model="form.password" prefix-icon="iconfont icon-3702mima"  placeholder="password show" ></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                  <el-button type="primary" icon="el-icon-search" @click="recover">Recover</el-button>
                  <el-button type="info" plain icon="el-icon-refresh-left" @click="reset">Reset</el-button>
              </el-form-item>
            </el-form>
            
            
          </div>
    </div>
  
  </div>
  
</template>

<script>
  export default{
    data(){
      return{
        // 这是表单的数据绑定对象
          form:{
            username:'',
            password:''
          },
          // 这是表单的验证规则对象
          recoverRules:{
            // 验证账号是否合法
            username:[
              { required: true,message:"please input the librarian account you want recover",trigger:"blur"}
            ],
            passwprd:[]
          }

      }
    },
    created(){

    },
    mounted(){
      this.putRecover();
    },
    methods:{
      // 返回首页
      backToAdminHome(){
        this.$router.push('/admin_home');
      },
      putCover(){
        // this.$http.put('http://39.106.172.170/admin/bookmanager/password',{params:{'name':this.username}})
        this.$axios({
           url: 'https://39.106.172.170/admin/bookmanager/password?name='+this.username,
           method: 'PUT',
         })
      },
      recover(){
        // this.putRecover();
        console.log("密码找回成功");
        this.form.password=this.form.username;
         this.$message({
          message: 'Password Recover Successfully!  New password is same as your username!',
          type: 'success'
        });
      },
      backToLogin(){
        this.$router.push('/admin_login');
      },
      reset(){
        // console.log(this)
        this.$refs.recoverRef.resetFields();
        this.form.password=""
        this.$message('Account Has Reset');
      }
    }
  }
</script>

<style lang="less" scoped>

.header .header_navbar .logout{
  position: absolute;
  right:400px ;
}
.header .header_navbar .logout_login{
  position: absolute;
  right:240px ;
}
.recover_box{
  width: 450px;
  height: 300px;
  /* background-color: pink; */
  /* border: 1px solid rgba(0, 0, 0,.3 ); */
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btns{
  display: flex;
  justify-content: flex-end;
}
.rec_form{
  position: absolute;
  bottom: 0;
  width: 100%;

}
</style>
